window.addEventListener("load", function() {
	var previewImg = document.querySelector(".preview_img");
	var mask = document.querySelector(".mask");
	var big = document.querySelector(".big");
	//当鼠标经过preview_img就显示和隐藏mask遮挡层和big大盒子
	previewImg.addEventListener("mouseover", function() {
		mask.style.display = "block";
		big.style.display = "block";
	})

	previewImg.addEventListener("mouseout", function() {
		mask.style.display = "none";
		big.style.display = "none";
	})

	previewImg.addEventListener("mousemove", function(e) {
		var x = e.pageX - previewImg.offsetLeft;
		var y = e.pageY - previewImg.offsetTop;
		var maskX = x - mask.offsetWidth / 2;
		var maskY = y - mask.offsetHeight / 2;

		//大盒子-小盒子,限制小盒子只能在大盒子范围内移动
		var maskX_MAX = previewImg.offsetWidth - mask.offsetWidth;
		var maskY_MAX = previewImg.offsetHeight - mask.offsetWidth;
		if (maskX <= 0) {
			maskX = 0;
		} else if (maskX >= maskX_MAX) {
			maskX = maskX_MAX
		}
		if (maskY <= 0) {
			maskY = 0;
		} else if (maskY >= maskY_MAX) {
			maskY = maskY_MAX
		}
		mask.style.left = maskX + "px";
		mask.style.top = maskY + "px";

		//大图片移动距离=遮挡移动距离*大图片最大移动距离/遮挡曾的最大移动距离
		var bigImg = document.querySelector(".bigImg");
		var bigMax = bigImg.offsetWidth - big.offsetWidth;
		var bigX = maskX * bigMax / maskX_MAX;
		var bigY = maskY * bigMax / maskY_MAX;
		bigImg.style.left = -bigX + "px";
		bigImg.style.top = -bigY + "px";
	});

})
